<template>
	<div class="mainRight">
		<el-form
			ref="ruleForm"
			class="ruleForm"
			:model="ruleForm"
			label-width="80px"
			inline
			size="medium"
		>
			<el-form-item label="相关组织:">
				<el-select v-model="ruleForm.year" placeholder="请选择">
					<el-option
						v-for="item in yearList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="考试名称:">
				<el-select v-model="ruleForm.month" placeholder="请选择">
					<el-option
						v-for="item in monthList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态:">
				<el-select v-model="ruleForm.ranking" placeholder="请选择">
					<el-option label="总排行" :value="1"> </el-option>
					<el-option label="支部排行" :value="2"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="考试时间:">
				<el-input
					v-model="ruleForm.name"
					placeholder="请输入申报对象"
				></el-input>
			</el-form-item>
			<el-form-item label="主题教育:">
				<el-input
					v-model="ruleForm.name"
					placeholder="请输入申报对象"
				></el-input>
			</el-form-item>
		</el-form>
		<div class="tableListOperator">
			<div class="leftBtns">
				<el-button
					type="primary"
					size="small"
					icon="el-icon-plus"
					@click="addExam"
					>新增考试</el-button
				>
			</div>
			<div class="rightBtns">
				<el-button size="small" plain>重置</el-button>
				<el-button type="primary" size="small">查询</el-button>
			</div>
		</div>
		<el-table :data="list" style="width: 100%" v-loading="loading">
			<el-table-column label="考试名称" align="center"> </el-table-column>
			<el-table-column prop="name" label="发布组织" align="center">
			</el-table-column>
			<el-table-column prop="name" label="主题教育" align="center">
			</el-table-column>
			<el-table-column prop="zz" label="开始时间" align="center">
			</el-table-column>
			<el-table-column prop="zz" label="结束时间" align="center">
			</el-table-column>
			<el-table-column
				prop="jf"
				label="当前状态"
				align="center"
			></el-table-column>
			<el-table-column
				prop="jf"
				label="参与率"
				align="center"
			></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="{ row }">
					<div
						style="
							display: flex;
							align-items: center;
							justify-content: center;
						"
					>
						<el-button type="text" @click="detail(row)"
							>查看</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="result(row)"
							>结果</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="del(row)"
							>删除</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="exportFile(row)"
							>导出</el-button
						>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="ruleForm.total > 0"
			:total="ruleForm.total"
			:page.sync="ruleForm.pageNum"
			:limit.sync="ruleForm.pageSize"
			@pagination="() => {}"
		/>
		<el-dialog title="新增考试" :visible.sync="examdialog" width="1300px">
			<el-timeline>
				<el-timeline-item>
					<span class="dot" slot="dot">1</span>
					<div class="timelinetitle">基本信息</div>
					<el-form label-width="80px" style="margin-top: 30px">
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="考试名称">
									<el-input
										placeholeder="请输入考试名称"
									></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="发布组织">
									<el-cascader
										:options="[]"
										:props="{ checkStrictly: true }"
										clearable
										style="width: 100%"
									></el-cascader> </el-form-item
							></el-col>
						</el-row>
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="开始时间">
									<el-date-picker
										type="datetime"
										placeholder="选择日期"
										style="width: 100%"
									>
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="结束时间">
									<el-date-picker
										type="datetime"
										placeholder="选择日期"
										style="width: 100%"
									>
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="参与组织">
									<el-cascader
										:options="[]"
										:props="{ checkStrictly: true }"
										clearable
										style="width: 100%"
									></el-cascader> </el-form-item
							></el-col>
							<el-col :span="12">
								<el-form-item label="参与人">
									<el-cascader
										:options="[]"
										:props="{ checkStrictly: true }"
										clearable
										style="width: 100%"
									></el-cascader> </el-form-item
							></el-col>
						</el-row>
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="考试说明">
									<el-input
										type="textarea"
										:rows="4"
										placeholder="请输入考试说明"
									></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="考试封面">
									<el-upload
										action=""
										list-type="picture-card"
									>
										<i class="el-icon-plus"></i>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-timeline-item>
				<el-timeline-item>
					<span class="dot" slot="dot">2</span>
					<div class="timelinetitle">题目设置</div>
					<el-form label-width="80px" style="margin-top: 30px">
						<el-form-item label="题目">
							<el-button
								type="primary"
								size="small"
								@click="questionSelect"
								>选择题目</el-button
							>
							<el-tag
								type="warning"
								size="mini"
								style="margin-left: 10px"
								>当前已选择0道题目，其中单选0题，多选0题，判断0题</el-tag
							>
						</el-form-item>
						<el-form-item label="题目顺序">
							<el-select>
								<el-option value="1"></el-option>
							</el-select>
							<i
								class="el-icon-info"
								style="
									font-size: 18px;
									color: #faad14;
									margin: 0 10px;
								"
							></i>
							<span style="color: #999; margin-left: 15px"
								>题目随机时需要设置每次单选、多选、判断题目数量</span
							>
						</el-form-item>
						<el-row :gutter="80">
							<el-col :span="8">
								<el-form-item label="单选分">
									<el-input-number
										controls-position="right"
										style="width: 100%"
									></el-input-number>
									<span
										style="
											position: absolute;
											right: 0;
											top: 33px;
										"
										>单选总分：0分</span
									>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="多选分">
									<el-input-number
										controls-position="right"
										style="width: 100%"
									></el-input-number>
									<span
										style="
											position: absolute;
											right: 0;
											top: 33px;
										"
										>多选总分：0分</span
									>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="判断分">
									<el-input-number
										controls-position="right"
										style="width: 100%"
									></el-input-number>
									<span
										style="
											position: absolute;
											right: 0;
											top: 33px;
										"
										>判断总分：0分</span
									>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="80" style="margin-top: 10px">
							<el-col :span="8">
								<el-form-item label="单选题">
									<el-input-number
										controls-position="right"
										style="width: 100%"
									></el-input-number>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="多选题">
									<el-input-number
										controls-position="right"
										style="width: 100%"
									></el-input-number>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="判断题">
									<el-input-number
										controls-position="right"
										style="width: 100%"
									></el-input-number>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="80" style="margin-top: 10px">
							<el-col :span="8">
								<el-form-item label="总分">
									<b style="font-size: 20px">0分</b>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="考试题数">
									<b style="font-size: 20px">0题</b>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-timeline-item>
				<el-timeline-item>
					<span class="dot" slot="dot">3</span>
					<div class="timelinetitle">可选信息</div>
					<el-form label-width="110px" style="margin-top: 30px">
						<el-form-item label="考试类型">
							<el-select style="width: 30%">
								<el-option value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="可考次数限制">
							<el-input-number
								controls-position="right"
								style="width: 30%"
							></el-input-number
							><span style="margin-left: 10px">次/人</span>
						</el-form-item>
						<el-form-item label="" label-width="0">
							<i
								class="el-icon-info"
								style="
									font-size: 18px;
									color: #faad14;
									margin-right: 10px;
								"
							></i>
							<span style="color: #999"
								>在开始结束时间范围内用户可重复进行考试，最终用户分数为多次考试的最高分。不填写则不限制次数</span
							>
						</el-form-item>
					</el-form>
				</el-timeline-item>
			</el-timeline>
			<span slot="footer" class="dialog-footer">
				<el-button>保存成草稿</el-button>
				<el-button type="primary">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title="题目选择"
			:visible.sync="questiondialog"
			width="1200px"
		>
			<el-row type="flex" justify="space-between">
				<el-col
					:span="13"
					style="
						border: solid 1px #ccc;
						margin-right: 10px;
						border-radius: 6px;
					"
				>
					<div class="qtitle">待选题目</div>
					<el-form>
						<el-row :gutter="20" style="padding: 0 20px">
							<el-col :span="8">
								<el-select>
									<el-option value="1"></el-option>
								</el-select>
							</el-col>
							<el-col :span="6">
								<el-input placeholder="题目名称检索"></el-input>
							</el-col>
							<el-col :span="3" :offset="7">
								<el-button type="primary" size="small"
									>查询</el-button
								>
							</el-col>
						</el-row>
					</el-form>
					<el-checkbox
						:indeterminate="isIndeterminateLeft"
						v-model="checkAllLeft"
						style="margin-left: 20px; margin-top: 10px"
						>全选</el-checkbox
					>
					<div style="margin: 15px 0"></div>
					<el-checkbox-group v-model="checkedquestion">
						<el-checkbox :label="1" class="questionitem"
							><span>题目类型</span>123456</el-checkbox
						>
						<el-checkbox :label="2" class="questionitem"
							>123456</el-checkbox
						>
						<el-checkbox :label="3" class="questionitem"
							>123456</el-checkbox
						>
					</el-checkbox-group>

					<pagination
						v-show="leftquery.total > 0"
						:total="leftquery.total"
						:page.sync="leftquery.pageNum"
						:limit.sync="leftquery.pageSize"
						@pagination="() => {}"
					/>
				</el-col>
				<el-col
					:span="11"
					style="
						border: solid 1px #ccc;
						margin-left: 10px;
						border-radius: 6px;
					"
				>
					<div class="qtitle">已选择题目</div>
					<el-checkbox-group v-model="checkedquestion">
						<el-checkbox :label="1" class="questionitem"
							><span>题目类型</span>123456</el-checkbox
						>
						<el-checkbox :label="2" class="questionitem"
							>123456</el-checkbox
						>
						<el-checkbox :label="3" class="questionitem"
							>123456</el-checkbox
						>
					</el-checkbox-group>

					<pagination
						v-show="leftquery.total > 0"
						:total="leftquery.total"
						:page.sync="leftquery.pageNum"
						:limit.sync="leftquery.pageSize"
						@pagination="() => {}"
					/>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary">确 定</el-button>
			</span></el-dialog
		>
		<!-- 详情 -->
		<el-dialog
			title="查看题目详情"
			:visible.sync="detaildialog"
			width="1000px"
		>
			<el-tabs v-model="detailtab" type="card">
				<el-tab-pane label="基本信息" name="基本信息" class="jbxx">
					<h1>考试名称</h1>
					<div>发布单位</div>
					<el-row>
						<el-col :span="12"><p>考试时间限制：无限制</p></el-col>
						<el-col :span="12"><p>可考次数限制：1次/人</p></el-col>
					</el-row>
					<p>题目顺序：随机</p>
					<p>答题周期：2021-01-01 至 2021-12-31</p>
					<p>考试说明：</p>
					<p>参与组织：</p>
					<div class="joiners">
						<span>参与人1</span>
						<span>参与人2</span>
					</div>
					<p>参与人：</p>
					<div class="joiner">
						<div>
							<span class="avatar">头像</span>
							<span>姓名</span>
						</div>
						<div>
							<span class="avatar">头像</span>
							<span>姓名</span>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="题目详情" name="题目详情">
					<el-alert
						title="总分：100分 单选：共10题*10.00分"
						type="warning"
						:closable="false"
					>
					</el-alert>
					<div class="questions">
						<div
							class="question"
							v-for="(item, index) in questionlist"
							:key="index"
						>
							<div class="questiontitle">
								<span class="questiontype">{{ item.type }}</span
								><span>{{ item.title }}</span>
							</div>
							<div class="answers">
								<div
									class="answer"
									v-for="(itm, idx) in item.options"
									:key="idx"
								>
									{{ tips[idx] }}:{{ itm }}
								</div>
							</div>
							<div class="realanswer">
								<span>正确答案：{{ item.answer }}</span>
								<span>答案解析</span>
							</div>
							<div class="analysis">这里是答案解析</div>
						</div>
					</div>

					<pagination
						v-show="questionquery.total > 0"
						:total="questionquery.total"
						:page.sync="questionquery.pageNum"
						:limit.sync="questionquery.pageSize"
						@pagination="() => {}"
					/>
				</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="detaildialog = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- 结果 -->
		<el-dialog title="做题详情" :visible.sync="resultdialog" width="800px">
			<h1 style="line-height: 2">考试名称</h1>
			<p>应参与组织1个，已参与组织0个 应参与人数7人，已参与人数1人</p>
			<el-form label-width="100px" style="padding: 10px 0px">
				<el-form-item label="党组织名称">
					<el-input placeholder="请输入党组织名称"></el-input>
				</el-form-item>
			</el-form>

			<div class="tableListOperator">
				<div class="leftBtns"></div>
				<div class="rightBtns">
					<el-button size="small" plain>导出</el-button>
					<el-button type="primary" size="small">查询</el-button>
				</div>
			</div>
			<el-tabs v-model="resulttab">
				<el-tab-pane label="组织详情" name="组织详情">
					<el-table :data="[{}]">
						<el-table-column label="排名"></el-table-column>
						<el-table-column label="党组织名称"></el-table-column>
						<el-table-column label="应参与人数"></el-table-column>
						<el-table-column label="考试参与人数"></el-table-column>
						<el-table-column label="平均分"></el-table-column>
					</el-table>
				</el-tab-pane>

				<el-tab-pane label="党员详情" name="党员详情">
					<el-table :data="[{}]">
						<el-table-column label="排名"></el-table-column>
						<el-table-column label="姓名"></el-table-column>
						<el-table-column label="所属党组织"></el-table-column>
						<el-table-column label="考试次数"></el-table-column>
						<el-table-column label="最高分"></el-table-column>
						<el-table-column
							label="最高分做题时间"
						></el-table-column>
						<el-table-column
							label="平均分"
						></el-table-column> </el-table
				></el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="resultdialog = false"
					>取消</el-button
				>
				<el-button type="primary" size="small">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			tips: [
				'A',
				'B',
				'C',
				'D',
				'E',
				'F',
				'G',
				'H',
				'I',
				'J',
				'K',
				'L',
				'M',
				'N',
				'O',
				'P',
				'Q',
				'R',
				'S',
				'T',
				'U',
				'V',
				'W',
				'X',
				'Y',
				'Z',
			],
			loading: false,
			list: [{ name: '周智超', zz: '中共兴平市组织部党委', jf: '19' }],
			form: {},
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				year: 2024,
				month: null,
				ranking: 1,
			},
			yearList: [
				{
					label: '2024',
					value: 2024,
				},
				{
					label: '2023',
					value: 2023,
				},
				{
					label: '2022',
					value: 2022,
				},
				{
					label: '2021',
					value: 2021,
				},
				{
					label: '2020',
					value: 2020,
				},
			],
			monthList: [
				{
					label: '全部',
					value: null,
				},
				{
					label: '1月',
					value: 1,
				},
				{
					label: '2月',
					value: 2,
				},
				{
					label: '3月',
					value: 3,
				},
				{
					label: '4月',
					value: 4,
				},
				{
					label: '5月',
					value: 5,
				},
				{
					label: '6月',
					value: 6,
				},
				{
					label: '7月',
					value: 7,
				},
				{
					label: '8月',
					value: 8,
				},
				{
					label: '9月',
					value: 9,
				},
				{
					label: '10月',
					value: 10,
				},
				{
					label: '11月',
					value: 11,
				},
				{
					label: '12月',
					value: 12,
				},
			],
			examdialog: false,
			questiondialog: false,
			isIndeterminateLeft: false,
			checkAllLeft: false,
			checkedquestion: [],
			leftquery: {
				pageNum: 1,
				pageSize: 10,
			},
			detaildialog: false,
			detailtab: '基本信息',
			questionlist: [
				{
					type: '单选',
					title: '123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456123456',
					options: ['A', 'B', 'C', 'D'],
					answer: 'A',
					analysis: '答案：A',
				},
			],
			questionquery: {
				pageNum: 1,
				pageSize: 10,
			},
			resultdialog: false,
			resulttab: '组织详情',
		}
	},
	methods: {
		handleSizeChange() {},
		handleCurrentChange() {},
		addExam() {
			this.examdialog = true
		},
		questionSelect() {
			this.questiondialog = true
		},
		detail(row) {
			this.detaildialog = true
		},
		result(row) {
			this.resultdialog = true
		},
		del(row) {
			this.$confirm(
				`删除后考试结果记录也会一起删除，确认执行删除操作？`,
				'删除考试',
				{
					confirmButtonText: '确 认',
					cancelButtonText: '取 消',
					type: 'warning',
				}
			)
				.then(() => {})
				.catch((err) => {})
		},
		exportFile(row) {},
	},
}
</script>

<style lang="scss" scoped>
.ruleForm {
	margin-bottom: 14px;
	::v-deep .el-form-item {
		width: 32.5%;
		// margin-right: 0;
		margin-bottom: 10px;
	}
	::v-deep .el-form-item__content {
		width: calc(100% - 80px);
		.el-select {
			width: 100%;
		}
	}
}
::v-deep .el-timeline-item__tail {
	left: 12px;
}
.dot {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #ff4d4f;
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
	text-align: center;
	line-height: 30px;
	color: #fff;
}
.timelinetitle {
	// font-size: 18px;
	font-weight: bold;
	// margin-bottom: 10px;
	padding-top: 6px;
	margin-left: 8px;
}
.qtitle {
	padding: 20px;
	font-size: 18px;
}
.questionitem {
	display: block;
	margin-right: 0;
	border-bottom: solid 1px #ccc;
	display: flex;
	padding: 8px 0;
	padding-left: 20px;
	align-items: center;
	span {
		color: #ff4d4f;
		margin: 0 6px;
	}
}
.jbxx {
	h1 {
		line-height: 2;
	}
	p {
		line-height: 2;
	}
}
.joiners {
	display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
	span {
		padding: 6px 20px;
		background-color: #e6e7eb;
		border-radius: 4px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
}
.joiner {
	display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
	div {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 10px;
		margin-bottom: 10px;
		.avatar {
			display: block;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-bottom: 5px;
			background: #e6e7eb;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.questions {
	.question {
		border-bottom: solid 1px #ccc;
		padding-bottom: 15px;
		.questiontitle {
			line-height: 1.8;
			padding: 8px 0;
			.questiontype {
				padding: 3px 5px;
				border-radius: 3px;
				border: solid 1px #ff4d4f;
				color: #ff4d4f;
				margin-right: 5px;
			}
		}
		.answers {
			line-height: 2;
		}
		.realanswer {
			display: flex;
			justify-content: space-between;
			color: #ff4d4f;
			span {
				&:last-child {
					padding: 3px 5px;
					border-radius: 3px;
					border: solid 1px #ff4d4f;
				}
			}
		}
	}
}
</style>
